<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="admin">
        <div class="adminNav">
            <div>
                <div><span class="glyphicon glyphicon-cog"></span></div>
                <div>管理员</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-cog"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    管理员
                </div>
            </div>
        </div>
        <div class="adminDetails" v-loading.body="loading" element-loading-text="拼命加载中">
            <div class="addAdmin">
                <div class="seek">
                    <div>主页地址：</div>
                    <div>
                        <a :href="homeUrlStr | strFun">{{homeUrlStr | strFun}}</a>
                    </div>
                    <div @click="updateUrl" class="homeUrl"><span class="glyphicon glyphicon-download-alt"></span>修改地址</div>
                </div>
                <div class="add" @click="addPopupClick">
                    <div>
                        <span class="glyphicon glyphicon-download-alt"></span>添加
                    </div>
                </div>
            </div>
            <div class="addMainData">
                <ul>
                    <li class="firstLi">
                        <div>姓名</div>
                        <div>账号</div>
                        <div>添加时间</div>
                        <div>操作</div>
                    </li>
                    <li class="dataLi" v-for="(adm,index) in items">
                        <div>{{adm.userName}}</div>
                        <div>{{adm.account}}</div>
                        <div>{{adm.ctime | ctimeFun}}</div>
                        <div>
                            <small @click="uppwClick(index)"><span class="glyphicon glyphicon-cog"></span>修改密码</small>
                            <small @click="resetClick(index)"><span class="glyphicon glyphicon-list-alt"></span>重置密码</small>
                            <small @click="deleteClick(index)">
                             <template>
                               <el-button class="elbut" type="text"><span class="glyphicon glyphicon-trash"></span>删除</el-button>
                             </template>
                           </small>
                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            共 {{adminNumber}} 条
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加套餐弹出框-->
        <div :class="{addPopup:isAddPopup,showAdd:isShowAdd}">
            <transition name="slide-fade">
                <div class="addMain" v-show="isAddShow" v-loading.body="adding" element-loading-text="正在注册中...">
                    <div>
                        <h2>添加管理员</h2>
                        <div @click="calladd" class="calladd">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>姓名：</div>
                        <div><input type="text" v-model="registerObj.userName" placeholder="请输入姓名"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>账号：</div>
                        <div><input type="text" v-model="registerObj.account" placeholder="请输入账号"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>密码：</div>
                        <div><input type="text" v-model="registerObj.psw" placeholder="请输入密码"></div>
                    </div>
                    <div class="promptS">
                        {{promptStr}}
                    </div>
                    <div class="operate">
                        <button @click="addClick" class="addClick">添加</button>
                        <button @click="calladd" class="calladd">取消</button>
                    </div>
                </div>
            </transition>
        </div>
        <!--添加套餐修改密码-->
        <div :class="{uppwPopup:isUppwPopup,upshowAdd:isupShowAdd}">
            <transition name="slide-fade">
                <div class="addMain" v-show="isupAddShow" v-loading.body="uping" element-loading-text="正在修改中...">
                    <div>
                        <h2>修改密码</h2>
                        <div @click="calladd" class="calladd">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>旧密码：</div>
                        <div><input type="password" v-model="opwd" placeholder="请输入旧密码"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>新密码：</div>
                        <div><input type="text" v-model="npwd" placeholder="请输入新密码"></div>
                    </div>
                    <div class="promptS">
                        {{promptStr}}
                    </div>
                    <div class="operate">
                        <button @click="upClick" class="addClick">修改</button>
                        <button @click="calladd" class="calladd">取消</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script type="text/javascript">
    import { mapActions } from 'vuex'
    export default {
        name: 'admin',
        data() {
            return {
                items: [],
                pageSizeNum: 10,
                totalNum: 0,
                currentPage: 1,
                isAddPopup: true,
                isAddShow: false,
                isShowAdd: true,
                isUppwPopup: false,
                isupShowAdd: true,
                isupAddShow: false,
                registerObj: {
                    userName: '',
                    account: '',
                    psw: '',
                    ctime: ''
                },
                promptStr: '带 * 号为必填项',
                loading: false,
                adding: false,
                opwd: '',
                npwd: '',
                npIndex: '',
                uping: false,
                adminNumber: 0,
                homeUrlStr: ''
            }
        },
        created: function () {
            // 判断是否登录
            var userName = sessionStorage.getItem('userName')
         
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            },
            strFun: function (val) {
                if (val) {
                    return val
                } else {
                    return '无'
                }
            }
        },
        methods: {
            // 汉字字母正则
            nameReg: function (str) {
                var regu = "^([A-Za-z]|[\u4E00-\u9FA5]{1,15})+$"
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 账号
            accountReg: function (str) {
                var regu = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{5,22}$/
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 添加管理员
            addPopupClick() {
                this.isAddShow = true
                this.isShowAdd = false
            },
            // 关闭弹窗
            calladd() {
                this.isAddShow = false
                this.isShowAdd = true
                this.isUppwPopup = false
                this.isupShowAdd = true
                this.isupAddShow = false
                this.registerObj.userName = ''
                this.registerObj.account = ''
                this.opwd = ''
                this.npwd = ''
            },
            // 重置密码
            resetClick(index) {
                var userId = sessionStorage.getItem('userId')
                var self = this
                this.$prompt('请输入密码', '重置密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{5,22}$/,
                    inputErrorMessage: '密码格式不正确'
                }).then(({ value }) => {
                    self.resetAdmin({
                        id: self.items[index].id,
                        npwd: value,
                        opid: userId
                    }).then((data) => {
                        // console.log(data)
                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '密码重置成功'
                            });
                        } else if (data.data.code == "500" && data.data.message == "no power") {
                            self.$message({
                                type: 'info',
                                message: '你没有删除权限!'
                            });
                        }
                    }).catch(msg => console.log(msg))
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '取消重置'
                    });
                });
            },
            // 修改密码弹窗
            uppwClick(index) {
                this.isUppwPopup = true
                this.isupShowAdd = false
                this.isupAddShow = true
                this.npIndex = index
                self.promptStr = '带星号为必填!'
            },
            // 修改密码
            upClick() {
                var self = this
                var opwdTrue = self.accountReg(self.opwd)
                var npwdTrue = self.accountReg(self.npwd)
                if (opwdTrue == true && npwdTrue == true) {
                    this.uping = true
                    self.upwdAdmin({
                        opwd: self.opwd,
                        npwd: self.npwd,
                        id: self.items[self.npIndex].id
                    }).then((data) => {
                        this.uping = false
                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '修改密码成功!'
                            });
                            self.isUppwPopup = false
                            self.isupShowAdd = true
                            self.isupAddShow = false
                            self.opwd = ''
                            self.npwd = ''
                        } else if (data.data.code == "500" && data.data.message == "pwd is error") {
                            self.promptStr = '旧密码错误!'
                        }
                    }).catch(msg => console.log(msg))
                } else {
                    if (opwdTrue != true) {
                        self.promptStr = '旧密码格式不对'
                        self.opwd = ''
                    } else if (npwdTrue != true) {
                        self.promptStr = '新密码格式不对'
                        self.npwd = ''
                    }
                }
            },
            // 删除管理员
            deleteClick(index) {
                var self = this
                var nameStr = "此操作将删除 " + self.items[index].account + "该管理员,是否继续 ?"
                this.$confirm(nameStr, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var userId = sessionStorage.getItem('userId')
                    var unUserId = unescape(userId)
                    self.deleteAdmin({
                        opid: unUserId,
                        id: self.items[index].id
                    }).then((data) => {
                        // console.log(data)
                        if (data.data.code == "200") {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            // 刷新列表
                            self.getAdmins({
                            }).then((data) => {
                                if (data.data.code == "200") {
                                    self.loading = false
                                    self.items = data.data.data.reverse()
                                    self.adminNumber = data.data.data.length
                                }
                            }).catch(msg => console.log(msg))
                        } else if (data.data.code == "500" && data.data.message == "no power") {
                            this.$message({
                                type: 'info',
                                message: '你没有删除权限!'
                            });
                        }
                    }).catch(msg => console.log(msg))
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 添加套餐
            addClick() {
                var self = this
                var userId = sessionStorage.getItem('userId')
                var namaTrue = this.nameReg(this.registerObj.userName)
                var accountTrue = this.accountReg(this.registerObj.account)
                var pswTrue = this.accountReg(this.registerObj.psw)
                console.log(namaTrue, accountTrue, pswTrue)
                if (namaTrue == true && accountTrue == true && pswTrue == true) {
                    self.adding = true
                    this.register({
                        account: this.registerObj.account,
                        pwd: this.registerObj.psw,
                        user: this.registerObj.userName,
                        opid: userId
                    }).then((data) => {
                        self.adding = false
                        if (data.data.code == "200") {
                            self.promptStr = ''
                            self.isAddShow = false
                            self.isShowAdd = true
                            self.registerObj.userName = ''
                            self.registerObj.account = ''
                            self.registerObj.psw = ''
                            this.$message({
                                type: 'success',
                                message: '注册成功!'
                            });
                            self.loading = true
                            self.getAdmins({
                            }).then((data) => {
                                if (data.data.code == "200") {
                                    self.loading = false
                                    self.items = data.data.data.reverse()
                                    self.adminNumber = data.data.data.length
                                }
                            }).catch(msg => console.log(msg))
                        } else if (data.data.code == "500") {
                            self.promptStr = '该账户已经注册'
                        }
                    }).catch(msg => console.log(msg));
                } else {
                    if (namaTrue != true) {
                        this.promptStr = '姓名只能为中文和字母组合'
                        this.registerObj.userName = ''
                    } else if (accountTrue != true) {
                        this.promptStr = '账号不能为汉字，5-22位'
                        this.registerObj.account = ''
                    } else if (pswTrue != true) {
                        this.promptStr = '密码不能为汉字'
                        this.registerObj.psw = ''
                    }
                }
            },
            // 修改主页地址
            updateUrl() {
                var self = this
                this.$prompt('请输入新的主页地址', '修改主页', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    self.getUrlUpdatePath({
                        url: value,
                    }).then((data) => {
                        if (data.data.code === 200) {
                            self.$message({
                                type: 'success',
                                message: '主页重置成功'
                            });
                            self.getUrlPath({
                            }).then((data) => {
                                if (data.data.code == "200") {
                                    self.homeUrlStr = data.data.data
                                }
                            }).catch(msg => console.log(msg))
                        }

                    }).catch(msg => console.log(msg))
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '取消重置'
                    });
                });
            },
            ...mapActions(['register','getAdmins','deleteAdmin','upwdAdmin','resetAdmin','getUrlPath','getUrlUpdatePath'])
        }
    }

</script>
<style scoped src="../../assets/css/admin.css">

</style>